<template>
	<view class="container">
		<button class="avatar-wrapper" style="border: none;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view class="nickname-box">
			<view class="label">
				昵称
			</view>
			<input type="nickname" class="nickname" placeholder="请输入昵称" maxlength="15" :value="nickName"
				@change="getNickname" />
		</view>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { $http,appId } from "@/common"
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	onLoad(() => {
 
	})
	onShow(() => {
         //console.log(appId,'appId')
	})
	const nickName = ref('')
	const avatarUrl = ref('https://hr-api.lanbeiduo.com/api/file/download/f5rdqmhEOh_noBody.png')
	function getNickname(val) {
          console.log(val,'nnn')
	}
	function onChooseAvatar(e) {
		console.log(e, 'eeeeeeeeee')
		avatarUrl.value = e.detail.avatarUrl
	}
	const getPhoneNumber = (e) => {
		console.log(e, 'crj')
		if(e.detail.errMsg=='getPhoneNumber:ok'){
			const params = {
				appId,
				code:e.detail.code
			}
			$http.post('getPhoneNumber',params).then(res=>{
				console.log(res,'手机号')
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding: 50rpx 0 0 0;
		background-color: #fff;
		.avatar-wrapper{
			height: 100rpx;
			margin-bottom: 50rpx;
		}
		.avatar{
			width: 100rpx;
			height: 100rpx;
		}
		.nickname-box{
			display: flex;
			align-items: center;
			border-top: 2rpx solid #F9F9F9;
			border-bottom: 2rpx solid #F9F9F9;
			padding: 20rpx;
			.label{
				margin-right: 50rpx;
			}
			.nickname{
				width: 500rpx;
			}
		}
	}
</style>